<script lang="ts" setup>
// 导入组件
import { ref, reactive, getCurrentInstance, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
// 引入Vue组件
import PagnationVue from "../public/Paginations.vue";
import WangEditor from "@/views/public/WangEditor2.vue";
// 从store中取出staff
import {useStore} from 'vuex';
const store = useStore();
// 通过计算属性获取数据
const currentStaff = computed(()=>{
  return store.getters['getStaff'];
})

// 获取当前页面的URL请求信息 
import { useRoute } from 'vue-router'
// 获取当前的路由信息
const route = useRoute()

// 导入按钮图标
import { Edit, More, Delete } from "@element-plus/icons-vue";
// 导入数据的api
import Api from "@/api";
// 获取当前的实例
const { proxy } = getCurrentInstance() as any;

const tabPosition = ref("left");
// 定义当前页面分页的数据
var pageData = reactive({
  page: ref(1),
  size: ref(17),
  total: ref(0),
});
// ==== 定义当前组件所需要的数据绑定 ===
var Data = reactive({
  // === 输入查询的条件===
  q_str: ref(""),
  // 任务类型
  q_type_options: reactive([{ id: "", name: "" }]),
  // 任务类型选择值
  q_type_selected: ref(""),
  // 任务状态
  q_status_options: reactive([{ id: "", name: "" }]),
  // 任务状态选择值
  q_status_selected: ref(""),
  // 分部
  q_branch_options: reactive([{ id: "", name: "" }]),
  // 分部选择值
  q_branch_selected: ref(""),
  // 业务区
  q_area_options: reactive([{ id: "", name: "" }]),
  // 业务区选择值
  q_area_selected: ref(""),
  // 场地
  q_place_options: reactive([{ code: "", name: "" }]),
  // 场地选择值
  q_place_selected: ref(""),
  // 责任人
  q_staff_options: reactive([{ id: "", name: "" }]),
  // 责任人选择值
  q_staff_selected: ref(""),

  // 查询查询区域字段是否展示
  q_branch_show: ref(true),
  q_area_show:ref(true),
  q_staff_show:ref(true),

  // 表格的数据
  orders: reactive([]),

  // ========弹出层表单=======
  isView: ref(false),
  isEdit: ref(false),
  // 弹出层的任务类型
  layer_type_options: reactive([{ id: "", name: "" }]),
  layer_place_options: reactive([]),
  dialogVisible: ref(false),
  layerTitle: ref(""),
  layerForm: reactive({
    id: ref(""),
    task_id: ref(""),
    staff: ref(""),
    name: ref(""),
    task_desc: ref(""),
    tasktype: ref(""),
    taskstatus: {
      name: ref(""),
    },
    create_time: ref(""),
    last_time: ref(""),
    is_suspend: ref(false),
    is_cancel: ref(false),
    is_transfer: ref(false),
    before_staff: ref(" "),
    transfor_time: ref(""),
    placecode: reactive([]),
    status: ref(""),
    cmplt_time: ref(""), // 完成时间
    cmplt_desc: ref(""), // 完成描述
    inc_desc: ref(""), // 未完成的描述
  }),
  wangEditorStatus: ref(false),
  // ========== transfer的数据========
  transfer_dialogVisible: ref(false),
  // 责任人
  transfer_staff_options: reactive([{ id: "", name: "" }]),
  // 责任人选择值
  transfer_staff_selected: ref(""),
  transfer_order_id:ref(""),
  transfer_last_staff: ref(""),

  // ========== 提交表单 ==============
  commit_dialogVisible: ref(false),
  commit_desc: ref(""),
  commit_order_id:ref(""),
});
// ==== 定义按钮权限的变量 =======
var Buttons = reactive({
  view: ref(false),
  add: ref(false),
  update: ref(false),
   del: ref(false),
  cancel: ref(false),
   pause: ref(false),
  transfer: ref(false),
  commit: ref(false),
})


//根据用户属性为查询区域赋值 
const prepareQuery = () =>{
  // 获取传递的员工信息
  var staffData = currentStaff.value;
  // 判断branch是否为空 
  if (staffData.branch){
    // 为分部赋值！
    Data.q_branch_selected = staffData.branch;
    // 控制是否展示
    Data.q_branch_show = false;
    // 获取下一级数据
     getAreas();
  }

  // 判断area是否为空
  if (staffData.area){
    // 为分部赋值！
    Data.q_area_selected = staffData.area;
     // 控制是否展示
    Data.q_area_show = false;
    // 获取下一级数据
     getPlaces();
  }

  // 判断是否是普通用户
  if (staffData.roles == "普通员工"){
    Data.q_staff_selected = staffData.id;  
    // 控制是否展示
    Data.q_staff_show = false;
  }

}

// 获取当前页面单前用户的按钮信息 
const getButtons = () => {
  // 获取当前页面的url
  let url = route.matched[1].path;
  // 后台！
  Api.RolesPerDetail.getDetail({url: url}).then((res)=>{
    // 获取当前的按钮权限 
    let buttons = res.data.data;
    
    // 遍历 
    for (let button of buttons){
      if (button.name =="查看"){
        Buttons.show = true;
      } else if (button.name =="修改") {
        Buttons.edit = true;
      } else if (button.name =="添加") {
        Buttons.add = true;
      } else if (button.name =="删除") {
        Buttons.del = true;
      } else if (button.name =="取消") {
        Buttons.cancel = true;
      } else if (button.name =="暂停") {
        Buttons.pause = true;
      } else if (button.name =="提交") {
        Buttons.commit = true;
      } else if (button.name =="转移") {
        Buttons.transfer = true;
      }
    }
  })

}

// 获取所有的数据
const getData = () => {

  let params = {
    page: pageData.page,
    size: pageData.size,
    search: Data.q_str,
    tasktype: Data.q_type_selected,
    taskstatus: Data.q_status_selected,
    branch: Data.q_branch_selected,
    area: Data.q_area_selected,
    place: Data.q_place_selected,
    staff: Data.q_staff_selected,
  };
  // 请求数据
  Api.TaskOrder.getAll(params).then((res) => {
    console.log(res);
    Data.orders = res.data.results;
    pageData.total = res.data.count;
  });
};

// 获取查询区域所有的下拉填充值
const getQueryOptions = async () => {
  // 获取任务类型
  Api.TaskType.getAll().then((res) => {
    Data.q_type_options = res.data;
    Data.layer_type_options = res.data;
  });

  // 获取任务状态
  await Api.TaskStatus.getAll().then((res) => {
    Data.q_status_options = res.data;
  });

  // 获取分部信息
  await Api.Branch.getAll().then((res) => {
    Data.q_branch_options = res.data;
  });

  // 获取责任人信息
  await Api.Staff.getAllSelect().then((res) => {
    console.log(res.data);
    Data.q_staff_options = res.data.data;
  });

  // 为弹出层填充所有场地
  // 获取场地
  await Api.Place.select().then((res) => {
    Data.layer_place_options = res.data.data;
  });
};

// 根据分部获取业务区的数据
const getAreas = () => {
  // 准备查询的条件
  let params = {
    branch: Data.q_branch_selected,
  };
  // 获取相应分部下的业务区
  Api.Area.getAll(params).then((res) => {
    Data.q_area_options = res.data;
  });
};

// 根据分部获取业务区的数据
const getPlaces = () => {
  // 准备查询的条件
  let params = {
    brancharea: Data.q_area_selected,
  };
  // 获取相应分部下的业务区
  Api.Place.getAll(params).then((res) => {
    Data.q_place_options = res.data;
  });
};

// 查询的事件响应
const queryTaskOrder = () => {
  // 重新获取数据
  getData();
};

// 显示全部的事件响应
const allTaskOrder = () => {


  
  // 清空查询条件
  Data.q_str = "";
  Data.q_status_selected = "";
  Data.q_type_selected = "";
  Data.q_branch_selected = "";
  Data.q_area_selected = "";
  Data.q_place_selected = "";
  Data.q_staff_selected = "";

  // 重新获取数据
  getData();
};

// 点击添加按钮
const addTask = async () => {
  //自动获取任务编号
  await Api.TaskOrder.get_new_orderid().then((res) => {
    console.log(res);
    Data.layerForm.task_id = res.data.data;
  });
  // 展示弹出层
  Data.dialogVisible = true;
  // 指定标题
  Data.layerTitle = "【添加任务工单】";

  // 为富文本编辑器设置状态
  Data.wangEditorStatus = true;
};

// 点击查看按钮
const viewTask = (row: any) => {
  // 展示弹出层
  Data.dialogVisible = true;
  // 指定标题
  Data.layerTitle = "【查看任务工单】";
  // 修改isView的值
  Data.isView = true;
  // 填充数据
  Data.layerForm = JSON.parse(JSON.stringify(row));
  // 定义一个array
  let array = new Array();
  array.push(row.areaplace.code);
  // 赋值给场地
  Data.layerForm.placecode = array;
  // 为富文本编辑器设置状态
  Data.wangEditorStatus = false;
};

// 点击编辑按钮
const EditTask = (row: any) => {
  // 展示弹出层
  Data.dialogVisible = true;
  // 修改isView的值
  Data.isEdit = true;
  // 填充数据
  Data.layerForm = JSON.parse(JSON.stringify(row));
  // 指定标题
  Data.layerTitle = "【编辑任务工单】";

  // 定义一个array
  let array = new Array();
  array.push(row.areaplace.code);
  // 赋值给场地
  Data.layerForm.placecode = array;
  // 获取当前选择的类型
  Data.layerForm.tasktype = row.tasktype.id;
  Data.layerForm.status = row.taskstatus.id;
  // 为富文本编辑器设置状态
  Data.wangEditorStatus = true;
};

// 暂停任务工单
const pauseTask = (row: any) => {
  // 提示确认
  // 提示
  let confirmStr =
    "您确认要暂停任务工单【\n场地：" +
    row.areaplace.name +
    "\n编号: " +
    row.id +
    "\n任务名称：" +
    row.name +
    "】信息吗？";
  // 提示
  ElMessageBox.confirm(confirmStr, "暂停工单确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    // Ajax请求
    Api.TaskOrder.pause(row.id).then((res) => {
      if (res.status === 200) {
        // 显示成功提示
        ElMessage({
          message: "任务工单暂停成功！",
          type: "success",
        });
        // 刷新数据
        getData();
      }
    });
  });
};

// 取消任务工单
const cancelTask = (row: any) => {
  // 提示确认
  // 提示
  let confirmStr =
    "您确认要取消任务工单【\n场地：" +
    row.areaplace.name +
    "\n编号: " +
    row.id +
    "\n任务名称：" +
    row.name +
    "】信息吗？";
  // 提示
  ElMessageBox.confirm(confirmStr, "取消工单确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    // Ajax请求
    Api.TaskOrder.cancel(row.id).then((res) => {
      if (res.status === 200) {
        // 显示成功提示
        ElMessage({
          message: "任务工单取消成功！",
          type: "success",
        });
        // 刷新数据
        getData();
      }
    });
  });
};

// 提交
const commitLayer = () => {
  // 提交的时候全部校验
  proxy.$refs.taskOrderFormRef.validate((valid: boolean) => {
    if (valid) {
      // 所有的都符合要求！
      // 判断是添加还是修改
      if (Data.isEdit) {
        Api.TaskOrder.edit(Data.layerForm.id, Data.layerForm).then((res) => {
          if (res.status === 201) {
            // 提示成功
            ElMessage({
              message: "员工修改成功！",
              type: "success",
            });
          }
        });
      } else {
        // 添加
        Api.TaskOrder.add(Data.layerForm).then((res) => {
          if (res.status === 201) {
            // 提示成功
            ElMessage({
              message: "员工添加成功！",
              type: "success",
            });
          }
        });
      }
      // 刷新表格
      getData();
      // 关闭
      closeLayer();
    }
  });
};

// ==== 关闭弹出层 =========
const closeLayer = () => {
  // 修改值
  Data.dialogVisible = false;
  // 初始化isView和isEdit
  Data.isEdit = false;
  Data.isView = false;
  // 初始化值 layerForm

  Data.layerForm.id = "";
  Data.layerForm.task_id = "";
  Data.layerForm.name = "";
  Data.layerForm.task_desc = "";
  Data.layerForm.tasktype = "";
  Data.layerForm.create_time = "";
  Data.layerForm.last_time = "";
  Data.layerForm.is_suspend = false;
  Data.layerForm.is_cancel = false;
  Data.layerForm.is_transfer = false;
  Data.layerForm.before_staff = "";
  Data.layerForm.transfor_time = "";
  Data.layerForm.placecode = [];
  Data.layerForm.status = "";
  Data.layerForm.cmplt_time = ""; // 完成时间
  Data.layerForm.cmplt_desc = ""; // 完成描述
  Data.layerForm.inc_desc = ""; // 未完成的描述
};

// ============== tansfer弹出层 =============
const transferLayer = (row: any) => {
  // 获取相应分部下的所有责任人
  getBranchStaff(row.areaplace.brancharea.branch.id);
  // 打开弹出层
  Data.transfer_dialogVisible = true;
  // 获取当前行的数据 
  Data.transfer_order_id= row.id;
  Data.transfer_last_staff = row.staff.name;


};

const startTransfer = () =>{


   // 准备要携带的数据
   let params = {
     order_id: Data.transfer_order_id,
     last_staff: Data.transfer_last_staff,
     staff: Data.transfer_staff_selected
   }

   // 请求后台接口 
   Api.TaskOrder.transfer(params).then((res)=>{
     // 显示成功！
       ElMessage({
        message: '转移成功！',
        type: 'success',
      })
     // 关闭弹出层 
      Data.transfer_dialogVisible = false;

      // 刷新页面
      getData();
   })



}

const getBranchStaff = async (branch: any) => {
  // 获取数据
  await Api.Staff.getBranchSelect({ branch_id: branch }).then((res) => {
    Data.transfer_staff_options = res.data.data;
  });
};

// ============== 用户提交工单 ================
const orderCommitLayer = (row: any) =>{
  // 弹出弹出层 
  Data.commit_dialogVisible=true;
  Data.commit_order_id  = row.id;

}

const orderCommit = () => {
  // 提交 
  Api.TaskOrder.commit({
    order_id: Data.commit_order_id,
    order_desc: Data.commit_desc
  }).then((res)=>{
    // 显示成功！
       ElMessage({
        message: '提交成功！',
        type: 'success',
      })
     // 关闭弹出层 
      Data.commit_dialogVisible = false;

      // 刷新页面
      getData();
  })
}


// ========== 获得父组件富文本编辑器的内容 ==============
const getWangEditorValue = (str: String) => {
  // 把值赋值为Data.layerForm.task_desc
  Data.layerForm.task_desc = str;

  console.log("父组件接收的值：", str);
};

// 自动执行的函数
const autoRun = () => {
  // 控制查询区域的值
  prepareQuery();
  //获取所有的工单数据
  getData();
  // 获取所有的下拉框填充值
  getQueryOptions();
  // 获取当前页面当前用户所具备的按钮权限
  getButtons();

};

// 执行
autoRun();
</script>

<template>
  <!--1. 查询区域 -->
  <el-form>
    <el-row :gutter="15">
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <el-form-item label="查询条件：">
          <el-input v-model="Data.q_str" placeholder="请输入查询条件" />
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <el-form-item label="任务类型：">
          <el-select
            v-model="Data.q_type_selected"
            placeholder="请选择任务类型"
            clearable
            filterable
          >
            <el-option
              v-for="item in Data.q_type_options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <el-form-item label="任务状态：">
          <el-select
            v-model="Data.q_status_selected"
            placeholder="请选择任务状态"
            clearable
            filterable
          >
            <el-option
              v-for="item in Data.q_status_options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-if="Data.q_branch_show">
        <el-form-item label="分部：">
          <el-select
            v-model="Data.q_branch_selected"
            placeholder="请选择分部"
            clearable
            filterable
            @change="getAreas"
          >
            <el-option
              v-for="item in Data.q_branch_options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-if="Data.q_area_show">
        <el-form-item label="业务区：">
          <el-select
            v-model="Data.q_area_selected"
            placeholder="请选择业务区"
            clearable
            filterable
            @change="getPlaces"
          >
            <el-option
              v-for="item in Data.q_area_options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
        <el-form-item label="场地：">
          <el-select
            v-model="Data.q_place_selected"
            placeholder="请选择场地"
            clearable
            filterable
          >
            <el-option
              v-for="item in Data.q_place_options"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-if="Data.q_staff_show">
        <el-form-item label="责任人：">
          <el-select
            v-model="Data.q_staff_selected"
            placeholder="请选择责任人"
            clearable
            filterable
          >
            <el-option
              v-for="item in Data.q_staff_options"
              :key="item.id"
              :label="`${item.id} ${item.name}`"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-if="Buttons.show">
        <el-form-item>
          <el-button type="primary" @click="queryTaskOrder">
            <el-icon><component class="icons" is="Search"></component></el-icon>
            <span>查询</span>
          </el-button>
          <el-button type="primary" @click="allTaskOrder">
            <el-icon><component class="icons" is="List"></component></el-icon>
            <span>全部</span>
          </el-button>
        </el-form-item>
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-if="Buttons.add">
        <el-form-item>
          <el-button type="primary" @click="addTask">
            <el-icon><component class="icons" is="CirclePlus"></component></el-icon>
            <span>添加</span>
          </el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

  <!--2. 表格区域 -->
  <el-table
    :data="Data.orders"
    border
    stripe
    style="width: 100%"
    :header-cell-style="{ backgroundColor: '#409EFF', color: '#FFF', fontSize: '14px' }"
  >
    <el-table-column label="序号" type="index" align="center" width="60" />
    <el-table-column label="任务编号" prop="task_id" align="center" width="100" />
    <el-table-column
      label="任务名称"
      prop="name"
      align="center"
      width="180"
      show-overflow-tooltip
    />
    <el-table-column label="任务类型" prop="tasktype.name" align="center" width="100" />
    <el-table-column label="任务状态" prop="taskstatus.name" align="center" width="100" />
    <el-table-column
      label="分部"
      prop="areaplace.brancharea.branch.name"
      align="center"
      width="100"
    />
    <el-table-column
      label="业务区"
      prop="areaplace.brancharea.name"
      align="center"
      width="100"
    />
    <el-table-column
      label="场地"
      prop="areaplace.name"
      align="center"
      show-overflow-tooltip
    />
    <el-table-column
      label="负责人"
      prop="staff.name"
      align="center"
      show-overflow-tooltip
    />
    <el-table-column
      label="结项时间"
      prop="last_time"
      align="center"
      show-overflow-tooltip
    />
    <el-table-column label="操作" align="center" width="400">
      <template #default="scope">
        <el-button
          type="primary"
          round
          size="small"
          @click="viewTask(scope.row)"
          v-if="Buttons.show"
        >详情</el-button>
        <el-button
          type="warning"
          round
          size="small"
          @click="EditTask(scope.row)"
          v-if="Buttons.edit"
        >编辑</el-button>
        <el-button type="danger"  round  size="small" v-if="Buttons.del">删除</el-button>
        <el-button type="info" round size="small" @click="pauseTask(scope.row)"
          v-if="Buttons.pause"
          >暂停</el-button
        >
        <el-button type="success" round size="small" @click="cancelTask(scope.row)"
          v-if="Buttons.cancel"
          >取消</el-button
        >
        <el-button type="primary" round size="small" @click="transferLayer(scope.row)" v-if="Buttons.transfer"
          >转移</el-button
        >
        <el-button type="success" round size="small" v-if="Buttons.commit"  @click="orderCommitLayer(scope.row)">提交</el-button
        >
     
      </template>
    </el-table-column>
  </el-table>

  <!--3. 分页  -->
  <PagnationVue :page="pageData"></PagnationVue>

  <!--4. 弹出层表单 --->
  <el-dialog v-model="Data.dialogVisible" width="60%" @close="closeLayer" top="10px">
    <!--标题部分-->
    <template #title>
      <div style="font-size: 18px; color: #409eff; font-weight: bold; text-align: left">
        {{ Data.layerTitle }}
      </div>
    </template>

    <!--表单部分-->
    <el-form
      :model="Data.layerForm"
      class="demo-form-inline"
      label-width="100px"
      ref="taskOrderFormRef"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="任务编号：" prop="name">
            <el-input
              v-model="Data.layerForm.task_id"
              :disabled="Data.isView || Data.isEdit"
              :suffix-icon="Edit"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任务名称：" prop="name">
            <el-input
              v-model="Data.layerForm.name"
              :disabled="Data.isView"
              :suffix-icon="Edit"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任务类型：" prop="name">
            <el-select
              v-model="Data.layerForm.tasktype"
              :disabled="Data.isView"
              placeholder="请选择任务类型"
              clearable
              filterable
              style="width: 100%"
            >
              <el-option
                v-for="item in Data.layer_type_options"
                :disabled="Data.isView"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select> </el-form-item
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="场地：" prop="name">
            <el-cascader
              :options="Data.layer_place_options"
              v-model="Data.layerForm.placecode"
              :disabled="Data.isView || Data.isEdit"
              :props="{ multiple: true }"
              :show-all-levels="false"
              placeholder="选择场地"
              filterable
              clearable
              style="width: 100%; height: auto"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item>
        <el-tabs  type="border-card" style="width: 100%;height:auto;">
          <el-tab-pane label="任务描述">
            <div style="width: 100%">
              <WangEditor
                :contentHtml="Data.layerForm.task_desc"
                :status="Data.wangEditorStatus"
                v-on:getWangEditorValue="getWangEditorValue"
                style="text-align: left"
              ></WangEditor>
            </div>
          </el-tab-pane>
          <el-tab-pane label="完成描述" v-if="Data.isView || Data.isEdit">
            <div style="width: 100%">
              <WangEditor
                :contentHtml="Data.layerForm.cmplt_desc"
                :status="false"
                style="text-align: left"
              ></WangEditor>
            </div>
          </el-tab-pane>
          <el-tab-pane label="未完成描述" v-if="Data.isView || Data.isEdit">
            <div style="width: 100%">
              <WangEditor
                :contentHtml="Data.layerForm.inc_desc"
                :status="false"
                style="text-align: left"
              ></WangEditor></div
          ></el-tab-pane>
        </el-tabs>
      </el-form-item>
      <!--
      <el-form-item label="任务描述：">
        <div style="width: 100%">
          <WangEditor
            :contentHtml="Data.layerForm.task_desc"
            :status="Data.wangEditorStatus"
            v-on:getWangEditorValue="getWangEditorValue"
            style="text-align: left"
          ></WangEditor>
        </div>
      </el-form-item> -->
      <el-row>
        <el-col :span="12" v-show="Data.isView || Data.isEdit">
          <el-form-item label="创建时间：">
            <el-date-picker
              v-model="Data.layerForm.create_time"
              type="datetime"
              style="width: 100%"
              value-format="YYYY-MM-DD HH:mm:ss"
              :disabled="Data.isView || Data.isEdit"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结项时间：">
            <el-date-picker
              v-model="Data.layerForm.last_time"
              type="datetime"
              style="width: 100%"
              value-format="YYYY-MM-DD HH:mm:ss"
              :disabled="Data.isView"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="Data.isView || Data.isEdit">
        <el-col :span="4">
          <el-form-item label="是否暂停：" prop="name">
            <template #default="scope">
              <el-switch
                v-model="Data.layerForm.is_suspend"
                active-color="#13ce66"
                inactive-color="lightgray"
                :disabled="true"
              >
              </el-switch>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="是否取消：" prop="name">
            <template #default="scope">
              <el-switch
                v-model="Data.layerForm.is_cancel"
                active-color="#13ce66"
                inactive-color="lightgray"
                :disabled="true"
              >
              </el-switch>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="是否转移：" prop="name">
            <template #default="scope">
              <el-switch
                v-model="Data.layerForm.is_transfer"
                active-color="#13ce66"
                inactive-color="lightgray"
                :disabled="true"
              >
              </el-switch>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="前负责人：" prop="name">
            <el-input
              v-model="Data.layerForm.before_staff"
              :suffix-icon="Edit"
              :disabled="true"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="转移时间：">
            <el-date-picker disabled type="datetime" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-show="Data.isView || Data.isEdit">
        <el-col :span="12">
          <el-form-item label="状态：">
            <el-input
              v-model="Data.layerForm.taskstatus.name"
              :disabled="Data.isView || Data.isEdit"
              :suffix-icon="Edit"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="完成时间：">
            <el-date-picker disabled type="datetime" style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <!--
      <el-form-item label="完成描述：" v-show="Data.isView || Data.isEdit">
        <div style="width: 100%">
          <WangEditor
            :contentHtml="Data.layerForm.cmplt_desc"
            :status="false"
            style="text-align: left"
          ></WangEditor>
        </div>
      </el-form-item>

      <el-form-item label="未完成描述：" v-show="Data.isView || Data.isEdit">
        <div style="width: 100%">
          <WangEditor
            :contentHtml="Data.layerForm.inc_desc"
            :status="false"
            style="text-align: left"
          ></WangEditor>
        </div>
      </el-form-item>
      -->
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="commitLayer">提交</el-button>
        <el-button @click="closeLayer">取消</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 5. 弹出层表单转移 --->
  <el-dialog v-model="Data.transfer_dialogVisible" width="30%">
    <!--标题部分-->
    <template #title>
      <div style="font-size: 18px; color: #409eff; font-weight: bold; text-align: left">
        <span>请选择要转移的责任人</span>
      </div>
    </template>
    <el-form>
      <el-form-item label="责任人：">
        <el-select
          v-model="Data.transfer_staff_selected"
          placeholder="请选择责任人"
          clearable
          filterable
        >
          <el-option
            v-for="item in Data.transfer_staff_options"
            :key="item.id"
            :label="`${item.id} ${item.name}`"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="startTransfer">确定转移</el-button>
        <el-button >取消</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 6. 弹出层表单提交--->
  <el-dialog v-model="Data.commit_dialogVisible" width="30%">
    <!--标题部分-->
    <template #title>
      <div style="font-size: 18px; color: #409eff; font-weight: bold; text-align: left">
        <span>提交任务</span>
      </div>
    </template>
    <el-form>
      <el-form-item label="提交说明：">
      <el-input v-model="Data.commit_desc" type="textarea" />
    </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="orderCommit">确定提交</el-button>
        <el-button >取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
  margin: 0px;
}
.el-form-item__content {
  margin-left: 0px;
}
</style>
